<template>
  <div>
    <div class="nav-bar">
      <div class="l">
        <a href="/">图标</a>
        <a class="blue" href="/">考研吧</a>
      </div>
      <div class="r">
        <el-input
          placeholder="请输入内容"
          v-model="inputText"
          clearable
          @keyup.enter.native="InputChange"
        >
          <i
            slot="prefix"
            class="el-icon-search el-input__icon"
            @click="InputChange"
          ></i>
        </el-input>
        <!-- <div> -->
        <el-dropdown>
          <span class="el-dropdown-link">
            上传<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <!-- word，pdf，视频上次还没写 -->
            <!-- <a :href="article"><el-dropdown-item>word文档</el-dropdown-item></a>
            <a :href="pdf"><el-dropdown-item>pdf文档</el-dropdown-item></a>
            <a :href="video"><el-dropdown-item>b站视频</el-dropdown-item></a> -->
            <a :href="Edit"><el-dropdown-item>写文章</el-dropdown-item></a>
          </el-dropdown-menu>
        </el-dropdown>
        <!-- </div> -->
        <a class="loginHover" :href="login">登录</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: "",
      article: "#/articlescolumns",
      login: "#/login",
      pdf: "#/PDFPage",
      video: "#/videoPage",
      Edit: "#/EditPage",
    };
  },
  methods: {
    // 搜索跳转页面
    InputChange() {
      // 设置input text输入空，就不跳转，有值进行跳转
      // replace(/ /g,"")设置空格为空
      if (this.inputText.replace(/ /g,"").length) {
        console.log(this.inputText);
        this.$router.push({
          path: "/search/",
          query: { subject: this.inputText },
        }); //跳转页面搜索页，带参数查询
      }
    },
  },
};
</script>

<style land="scss" scoped>
a {
  color: #000;
  text-decoration: none;
}
.blue {
  color: #409eff;
}
.nav-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100vw;
  height: 70px;
  box-shadow: 0px 1px 5px #00000029;
  border-radius: 8px;
  background: #fff;
}
.l > a {
  margin: 0 22px;
}
.r {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 宽度还没设置 */
.el-input {
  width: 350px;
}
.el-dropdown {
  margin: 0 40px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.loginHover:hover {
  color: #409eff;
}
</style>